<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>授权书籍列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-card-body span[lay-separator] {
            margin: 0 10px;
            color: #999;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="layui-breadcrumb" lay-separator="—">
              <a href="javascript:;">{$recommend.agent_name}</a>
              <a href="javascript:;">{if $recommend.freq == 0}无区分{/if}{if $recommend.freq == 1}男频{/if}{if $recommend.freq == 2}女频{/if}</a>
              <a><cite>{$recommend.title}</cite></a>
            </span>
        </div>

        <div class="layui-form layui-card-header layuiadmin-card-header-auto">

            <div class="layui-form-item">

                <div class="layui-inline">
                    <input type="text" name="novel_id" placeholder="请输入小说ID" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-inline">
                    <select name="type">
                        <option value="">选择类型</option>
                        <option value="1">广告线上</option>
                        <option value="2">屏蔽地区</option>
                    </select>
                </div>


                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>

            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-recommend-novel" lay-filter="LAY-recommend-novel"></table>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="add">添加小说</button>
                </div>
            </script>

            <script type="text/html" id="classTpl">
                {{#  if(d.novel.freq && d.novel.novel_class){ }}
                {{d.novel.freq.name}}<span lay-separator="">·</span>{{d.novel.novel_class.name}}
                {{#  } }}
            </script>

            <script type="text/html" id="typeTpl">
                {{#  if(d.type == 1){ }}
                <span style="color: #5FB878;">广告线上</span>
                {{#  } }}
                {{#  if(d.type == 2){ }}
                <span style="color: #01AAED;">地区屏蔽</span>
                {{#  } }}
            </script>

            <script type="text/html" id="table-useradmin-admin">
                <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete" ></i>删除</a>
            </script>
        </div>


    </div>

</div>
<div class="hot-show" style="display: none;">

    <form class="layui-form layui-form-pane" style="padding: 10px;" action="">


        <div class="layui-form-item" pane="">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="1" title="广告线上">
                <input type="radio" name="type" value="2" title="屏蔽地区">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">小说ID</label>
            <div class="layui-input-block">
                <textarea id="nIds" placeholder="请输入id，并用半角逗号分隔，如：1,2,3,4,5,6" class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-mid layui-word-aux">相同类型下最多添加100本小说，如果超出，超出部分程序将不会添加</div>
        </div>
    </form>

</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','admin'], function(){
        var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,table = layui.table;

        form.on('submit(LAY-user-search)', function(data){
            var field = data.field;
            //执行重载
            table.reload('LAY-recommend-novel', {
                where: field
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });


        table.render({
            elem: '#LAY-recommend-novel'
            , url: '/website/recommendNovel?id={$id}' //模拟接口
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: false
            , cellMinWidth: 100
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            , page: true //开启分页
            , limit: 18
            , limits: [20, 30, 40, 50, 100]
            , cols: [
                [{field: 'id', width: 80, title: 'ID'}
                    , {field: 'type', title: '人群类型',templet:"#typeTpl"}
                    , {field: 'novel', title: '书名',templet:function (d) {
                        return "【"+d.novel_id+"】 "+d.novel.title;
                    }}
                    , {
                        field: 'scale', title: '评级', templet: function (d) {
                            if (d.novel.scale === 'S') {
                                return '<span style="color: #FF5722;">S级</span>'
                            } else if (d.novel.scale === 'A') {
                                return '<span style="color: #FFB800;">A级</span>'
                            } else if (d.novel.scale === 'B') {
                                return '<span style="color: #01AAED;">B级</span>'
                            } else if (d.novel.scale === 'C') {
                                return '<span style="color: #5FB878;">C级</span>'
                            } else {
                                return '';
                            }
                        }, align: 'center'
                    }
                    , {field: 'in_shelf', title: '<span lay-tips="下架则不展示">是否上架</span>', templet: function (d) {
                        if (d.novel.in_shelf === 2) {
                            return '<span style="color: #FF5722;">下架</span>';
                        } else if (d.novel.in_shelf === 1) {
                            return '上架';
                        }else {
                            return '<span style="color: #FF5722;">绝对下架</span>';
                        }
                    }, align: 'center'}
                    , {field: 'class', title: '频道<span lay-separator="">·</span>分类', templet: '#classTpl', align: 'center',minWidth:180}
                    , {field: 'sort', width: 80, title: '<span lay-tips="推荐位非随机模式下，数字越小排的越前">排序</span>',align: 'center', edit: 'text'}
                    , {
                    title: '操作',
                    minWidth: 200,
                    align: 'center',
                    fixed: 'right',
                    toolbar: '#table-useradmin-admin',
                }]]
        });

        //监听单元格编辑
        table.on('edit(LAY-recommend-novel)', function (obj) {
            console.log(obj.value); //得到修改后的值
            admin.req({
                url: '/website/setRecommendNovelSort'
                , type: "POST"
                , data: {'id': obj.data.id, 'sort': obj.value}
                , done: function (res) {
                    layer.msg('修改成功', {icon: 1, time: 1000}, function () {
                    });
                }, not_finish: function (res) {
                    layer.msg(res.msg);
                }
            });
        });


        //头工具栏事件
        table.on('toolbar(LAY-recommend-novel)', function (obj) {
            switch (obj.event) {
                case 'add':
                    $("#nIds").val('');
                    layer.open({
                        type: 1,
                        title:'添加书籍',
                        offset: '15px',
                        area: ['35%', '350px'],
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 0, //不显示关闭按钮
                        anim: 2,
                        shadeClose: true, //开启遮罩关闭
                        content: $('.hot-show'),
                        btn: ['确定', '取消']
                        ,yes: function(index, layero){
                            var nIds = $("#nIds").val();
                            let replacedText = nIds.replace(/，/g, ',');
                            $("#nIds").val(replacedText);
                            var type = $('input[name="type"]:checked').val();
                            admin.req({
                                url: '/website/addRecommendNovel'
                                , type: "POST"
                                , data: {'nIds': replacedText, 'id': '{$id}', 'type': type}
                                , done: function (res) {
                                    layer.msg(res.data, {icon: 1, time: 1000}, function () {
                                        layer.close(index); //关闭弹层
                                        table.reload('LAY-recommend-novel');
                                    });
                                },not_finish:function (res) {
                                    layer.msg(res.msg);
                                }
                            });
                        }
                    });
                    break;
            }
        });


        //监听工具条
        table.on('tool(LAY-recommend-novel)', function(obj){
            var data = obj.data;
            if (obj.event === 'del'){
                layer.confirm('【'+obj.data.novel.title+'】确认删除此书籍吗？',{icon: 3, title:false}, function(index){
                    admin.req({
                        url: '/website/delRecommendNovel'
                        , type: "POST"
                        , data: {'id': obj.data.id}
                        , done: function (res) {
                            layer.msg('删除成功', {icon: 1, time: 1000}, function () {
                                obj.del();
                                layer.close(index);
                            });
                        },not_finish:function (res) {
                            layer.msg(res.msg);
                        }
                    });
                });
            }
        });


    });
</script>
</body>
</html>

